<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <script src="../layui/layui.js"></script>

    <style>

        /* - 侧边栏 */
        .sidebar {
            top: 0;
            left: 0;
            bottom: 0;
            color: #fff;
            width: 250px;
            position: fixed;
            overflow: hidden;
            overflow-y: auto;
            background: #4b4b4b;
        }

        /* -- 头像 */
        .sidebar .avatar {
            width: 160px;
            height: 160px;
            margin: 2em auto;
            background: #fff;
            border-radius: 100%;
            border: #fff 5px solid;
            transition: transform 0.5s;
        }

        .sidebar .avatar:hover {
            transform: rotate(1turn);
        }

        .sidebar .avatar img {
            border-radius: 100%;
        }

        /* -- 侧边栏导航 */
        .sidebar .nav {
            margin: 0;
            display: flex;
            list-style: none;
            flex-direction: column;
        }

        .sidebar .nav a {
            color: #fff;
            padding: 1em;
            display: block;
            text-align: center;
            transition: background .3s, box-shadow .3s;
        }

        .sidebar .nav a:hover {
            background: rgba(0, 0, 0, .2);
        }
    </style>

</head>
<body>


<div id="ce" style="margin: 50px 0px 50px 350px">

    <aside class="sidebar">
        <div class="avatar">
            <img src="../image/tx2.jpg" title="Chien_W"/>
        </div>
        <nav class="nav">
            <a href="user.html">个人信息</a>
            <a href="recharge.html">充值</a>
            <a href="order.html">订单</a>


        </nav>
    </aside>

    <div style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);">
        <form class="layui-form" lay-filter="userForm">

            <div class="layui-form-item">
                <label class="layui-form-label">昵称</label>
                <div class="layui-input-block" style="width: 190px;">
                    <input type="text" name="uNickname" placeholder="请输入" autocomplete="off"
                           class="layui-input">
                </div>
            </div>

            <div class="layui-form-item" lay-ignore67>
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <input type="radio" name="sex" value="1" title="男" checked>
                    <input type="radio" name="sex" value="2" title="女">
                    <input type="radio" name="sex" value="0" title="保密">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-block" style="width: 190px;">
                    <input type="text" name="uName" placeholder="请输入" autocomplete="off"
                           class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">手机号</label>
                <div class="layui-input-block" style="width: 190px;">
                    <input type="tel" name="uPhone" placeholder="请输入手机号" autocomplete="off" class="layui-input"
                           maxlength="11" pattern="[0-9]{11}">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block" style="width: 190px;">
                    <input type="password" name="uPwd" placeholder="请输入密码" readonly autocomplete="off"
                           class="layui-input" minlength="6" required style="background-color: #f5f5f5;"/>
                    <a href="#" id="editLink" style="position: absolute; right: 10px; top: 7px;color: #01AAED;"
                       onclick="makeEditable()">修改</a>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">账户余额</label>
                    <div class="layui-input-inline layui-input-wrap">
                        <input type="text" name="balance" id="balance" value="￥1000" readonly class="layui-input"
                               style="background-color: #f5f5f5;">
                        <a href="recharge.html" style="position: absolute; right: 10px; top: 7px;color: #01AAED;">充值</a>
                    </div>
                </div>
            </div>


            <div class="layui-form-item" style="margin: 10px 0px 10px 0px;">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
<!--                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>-->
                </div>
            </div>

        </form>

    </div>

</div>


<script src="../layui/layui.js"></script>
<script src="../js/axios.js"></script>
<script>
    //Demo
    layui.use('form', function () {

        // 头像
        var headshotUrl = localStorage.getItem("headshotUrl");

        // 将图片插入
        layui.use('jquery', function(){
            var $ = layui.jquery;
            $('.avatar').html('<img src="' + headshotUrl + '" title="Chien_W"/>');
        });

         headshot:"../image/tx.jpg";
        var form = layui.form;
//		var balanceValue = document.getElementById("balance").value;



        axios.get("../user?op=findById ") //实现token后将id=1更换
            .then(rs => {
                // 赋值给
                document.querySelector('input[name="uNickname"]').value = rs.data.uNickname;
                form.val("userForm", {
                    // "uNickname": rs.data.uNickname
                    "uName": rs.data.uName
                    , "uPhone": rs.data.uPhone
                    , "balance": rs.data.balance
                    , "sex": rs.data.sex
                    , "uPwd": rs.data.uPwd
                });
                console.log(form.val());
            })
            .catch(error => {
                console.error('Error : ', error);

            });

        // 监听表单提交事件
        form.on('submit(userForm)', function () {
            var formData = form.val(); // 获取表单数据

            formData.uId = 1; // 加了token之类的再修改

            console.log(formData)

            // 发送 POST 请求更新用户信息
            axios.post('../user?op=updateInfo', formData)
                .then(function (response) {
                    layer.msg('请求发送成功');
                })
                .catch(function (error) {
                    layer.msg('请求失败');
                });

            return false; // 阻止默认的表单提交行为
        });


    });

    function makeEditable() {
        var inputField = document.querySelector('input[name="uPwd"]');
        inputField.removeAttribute('readonly');
        inputField.style.backgroundColor = '#ffffff';
        inputField.focus();
        document.getElementById('editLink').setAttribute('onclick', 'makeUneditable()');
        document.getElementById('editLink').innerText = '保存';
    }

    function makeUneditable() {
        var inputField = document.querySelector('input[name="uPwd"]');
        inputField.setAttribute('readonly', 'readonly');
        inputField.style.backgroundColor = '#f5f5f5';
        document.getElementById('editLink').setAttribute('onclick', 'makeEditable()');
        document.getElementById('editLink').innerText = '修改';
    }
</script>

<!-- <script>
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function() {
        var element = layui.element;
    });
</script> -->
<!--<script>-->
<!--    layui.use('util', function () {-->
<!--        var util = layui.util;-->


<!--        //执行-->
<!--        util.fixbar({-->
<!--            bar1: true,-->
<!--            bar2: true,-->
<!--            click: function (type) {-->
<!--                console.log(type);-->
<!--                if (type === 'bar1') {-->
<!--                    alert('点击了bar1')-->
<!--                }-->
<!--            }-->
<!--        });-->
<!--    });-->
<!--</script>-->
</body>
</html>
